<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Pace -->
    <link rel="stylesheet" href="../plugins/pace-master/themes/blue/pace-theme-flash.css">
    <script type="text/javascript" src="../plugins/pace-master/pace.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../dist/css/ionicons.min.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="../dist/css/skins/all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Content Header (Page header) -->

<!-- Main content -->
<section class="content">

    <!-- Main row -->
    <div class="row">
        <!-- Left col -->
        <div class="col-md-12">
            <!-- MAP & BOX PANE -->
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">地区统计分布概览</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <div class="row">
                        <div class="col-md-9 col-sm-8">
                            <div class="pad">
                                <!-- Map will be created here -->
                                <div id="world-map-markers" style="height: 450px;"></div>
                            </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-md-3 col-sm-4">
                            <div class="pad box-pane-right bg-green" style="min-height: 280px">
                                <div class="description-block margin-bottom">
                                    <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
                                    <h5 class="description-header">8390</h5>
                                    <span class="description-text">犬的数量</span>
                                </div>
                                <!-- /.description-block -->
                                <div class="description-block margin-bottom">
                                    <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
                                    <h5 class="description-header">30%</h5>
                                    <span class="description-text">智能项圈数量</span>
                                </div>
                                <!-- /.description-block -->
                                <div class="description-block">
                                    <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
                                    <h5 class="description-header">70%</h5>
                                    <span class="description-text">智能驱虫比</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <!-- /.col -->

        <!--<div class="col-md-4">-->
            <!--<div class="box box-default">-->
                <!--&lt;!&ndash; /.box-header &ndash;&gt;-->
                <!--<div class="box-body">-->
                    <!--<div class="row">-->
                        <!--<div class="col-md-8">-->
                            <!--<div class="chart-responsive">-->
                                <!--<canvas id="pieChart" height="150"></canvas>-->
                            <!--</div>-->
                            <!--&lt;!&ndash; ./chart-responsive &ndash;&gt;-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--&lt;!&ndash; /.row &ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash; /.box &ndash;&gt;-->
        <!--</div>-->
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<!-- jQuery 2.2.3 -->
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<!--<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<!--<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>-->
<!--<script src="../plugins/jvectormap/jquery-jvectormap-cn-mill.js"></script>-->
<!-- SlimScroll 1.3.0 -->
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<!--<script src="../plugins/chartjs/Chart.min.js"></script>-->
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>


<link href="ui_css/jquery.vector-map.css"  media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ui_js/jquery.vector-map.js"></script>
<script type="text/javascript" src="ui_js/china-zh.js"></script>
<script type="text/javascript">
    $(function() {
        /*id为中国省份标识符，name为对应省份名称，两者固定。event为活动情况，
        　　url为活动列表页面地址，数据可后台动态生成，这两项有活动的地区填写，无则留空。*/
//        var dataStatus = [
//            { cha: 'HKG', name: '香港', des: '', url: '' },
//            { cha: 'HAI', name: '海南', des: '', url: '' },
//            { cha: 'YUN', name: '云南', des: '', url: '' },
//            { cha: 'BEJ', name: '北京', des: '(3个活动)', url: '/event/1' },
//            { cha: 'TAJ', name: '天津', des: '', url: '' },
//            { cha: 'XIN', name: '新疆', des: '', url: '' },
//            { cha: 'TIB', name: '西藏', des: '', url: '' },
//            { cha: 'QIH', name: '青海', des: '', url: '' },
//            { cha: 'GAN', name: '甘肃', des: '', url: '' },
//            { cha: 'NMG', name: '内蒙古',des: '', url: '' },
//            { cha: 'NXA', name: '宁夏', des: '', url: '' },
//            { cha: 'SHX', name: '山西', des: '', url: '' },
//            { cha: 'LIA', name: '辽宁', des: '', url: '' },
//            { cha: 'JIL', name: '吉林', des: '', url: '' },
//            { cha: 'HLJ', name: '黑龙江',des: '', url: '' },
//            { cha: 'HEB', name: '河北', des: '', url: '' },
//            { cha: 'SHD', name: '山东', des: '', url: '' },
//            { cha: 'HEN', name: '河南', des: '', url: '' },
//            { cha: 'SHA', name: '陕西', des: '', url: '' },
//            { cha: 'SCH', name: '四川', des: '(1个活动)', url: '/event/2' },
//            { cha: 'CHQ', name: '重庆', des: '', url: '' },
//            { cha: 'HUB', name: '湖北', des: '(1个活动)', url: '/event/3' },
//            { cha: 'ANH', name: '安徽', des: '', url: '' },
//            { cha: 'JSU', name: '江苏', des: '', url: '' },
//            { cha: 'SHH', name: '上海', des: '', url: '' },
//            { cha: 'ZHJ', name: '浙江', des: '', url: '' },
//            { cha: 'FUJ', name: '福建', des: '', url: '' },
//            { cha: 'TAI', name: '台湾', des: '', url: '' },
//            { cha: 'JXI', name: '江西', des: '', url: '' },
//            { cha: 'HUN', name: '湖南', des: '', url: '' },
//            { cha: 'GUI', name: '贵州', des: '', url: '' },
//            { cha: 'GXI', name: '广西', des: '', url: '' },
//            { cha: 'GUD', name: '广东', des: '', url: '' }
//        ];
        //数据可以动态生成，格式自己定义，cha对应china-zh.js中省份的简称
        var dataStatus = [{ cha: 'HKG', name: '香港', des: '<br/>无活动点',tel:'13718187045' },
            { cha: 'HAI', name: '海南', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'YUN', name: '云南', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'BEJ', name: '北京', des: '<br/>2个活动点' ,tel:'13718187045' },
            { cha: 'TAJ', name: '天津', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'XIN', name: '新疆', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'TIB', name: '西藏', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'QIH', name: '青海', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'GAN', name: '甘肃', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'NMG', name: '内蒙古', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'NXA', name: '宁夏', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'SHX', name: '山西', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'LIA', name: '辽宁', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'JIL', name: '吉林', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'HLJ', name: '黑龙江', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'HEB', name: '河北', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'SHD', name: '山东', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'HEN', name: '河南', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'SHA', name: '陕西', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'SCH', name: '四川', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'CHQ', name: '重庆', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'HUB', name: '湖北', des: '<br/>1个活动点' ,tel:'13718187045' },
            { cha: 'ANH', name: '安徽', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'JSU', name: '江苏', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'SHH', name: '上海', des: '<br/>1个活动点' ,tel:'13718187045' },
            { cha: 'ZHJ', name: '浙江', des: '<br/>无活动点',tel:'13718187045'  },
            { cha: 'FUJ', name: '福建', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'TAI', name: '台湾', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'JXI', name: '江西', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'HUN', name: '湖南', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'GUI', name: '贵州', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'GXI', name: '广西', des: '<br/>无活动点' ,tel:'13718187045' },
            { cha: 'GUD', name: '广东', des: '<br/>无活动点',tel:'13718187045' }];

        $('#world-map-markers').vectorMap({
            map: 'china_zh',
//            backgroundColor: false,
//            color: "#BBBBBB",
            color: "#B4B4B4", //地图颜色
//            hoverColor: false,
            //显示各地区名称和活动
            onLabelShow: function (event, label, code) {
                $.each(dataStatus, function (i, items) {
                    if (code == items.cha) {
                        label.html(items.name + items.des +"<br/>"+ items.tel);
                    }
                });
            },
            //鼠标移入省份区域，改变鼠标状态
            onRegionOver: function(event, code){
                $.each(dataStatus, function (i, items) {
                    if ((code == items.cha) && (items.des != '')) {
                        $('#map').css({cursor:'pointer'});
                    }
                });
            },
            //鼠标移出省份区域，改回鼠标状态
            onRegionOut: function(event, code){
                $.each(dataStatus, function (i, items) {
                    if ((code == items.cha) && (items.des != '')) {
                        $('#map').css({cursor:'auto'});
                    }
                });
            },
            //点击有活动的省份区域，打开对应活动列表页面
            onRegionClick: function(event, code){
                $.each(dataStatus, function (i, items) {
                    if ((code == items.cha) && (items.des != '')) {
//                        window.location.href = items.des;
                        alert(items.name);
                    }
                });
            }
        });
        //改变有活动省份区域的颜色
//        $.each(dataStatus, function (i, items) {
//            if (items.event != '') {
//                var josnStr = "{" + items.id + ":'#00FF00'}";
//                $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
//            }
//        });
        $.each(dataStatus, function (i, items) {
            if (items.des.indexOf('个') != -1) {//动态设定颜色，此处用了自定义简单的判断
                var josnStr = "{" + items.cha + ":'#00FF00'}";
                $('#world-map-markers').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
            }
        });
        $('.jvectormap-zoomin').click(); //放大
    });
</script>
</body>
</html>
